<template>
    <view class="popup" @click.self="close">
        <view class="popup-con">
			<view class="popup-con-title">
				<text class="left">Date Format </text>
				<text class="right" @click.stop="done">Done</text>
			</view>
			
			<view class="popup-con-box">
				<view
					class="list"
					v-for="item in dateList"
					:key='item.value'
					@click="selectDate(item)"
				>
					<text>{{item.label}}</text>
					<image v-show='isActive == item.value' src="@/static/more/gou.png"></image>
				</view>
			</view>
        </view>
    </view>
</template>
<script>
export default{
	props:{
		dataVal:{
			type:String,
			default:""
		}
	},
	data() {
		return {
			isActive:uni.getStorageSync('dateFormat') || 'DMY',
			dateList:[
				{label:"MM/DD/YYYY(e.g.,12/09/2024)",value:'MDY',name:'MM/DD/YYYY'},
				{label:"DD/MM/YYYY(e.g.,09/12/2024)",value:'DMY',name:'DD/MM/YYYY'},
				{label:"YYYY-MM-DD(e.g.,2024-12-09)",value:'Y-M-D',name:'YYYY-MM-DD'},
				{label:"YYYY/MM/DD(e.g.,2024/12/09)",value:'Y/M/D',name:'YYYY/MM/DD'},
				{label:"Month DD,YYYY(e.g.,December 09,2024)",value:'MonDY',name:'Month DD,YYYY'},
				{label:"DD Month YYYY(e.g.,09 December 2024)",value:'DMonY',name:'DD Month YYYY'}
			],
			dateItem:{
				label:"DD/MM/YYYY(e.g.,09/12/2024)",
				value:'DMY',
				name:'DD/MM/YYYY'
			}
			
		};
	},
    methods:{
        done(){
			uni.setStorageSync('dateFormat',this.isActive || 'DMY');
			uni.setStorageSync('dateVal',this.dateItem.name || 'DD/MM/YYYY');
			this.$emit("done",this.dateItem)
            this.close()
        },
		close(){
			this.$emit("close")
		},
		selectDate(item){
			this.isActive = item.value;
			this.dateItem = item;
		}
    }
}
</script>

<style  scoped lang="scss">
	.popup{
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background: rgba(20,20,22,0.3);
		&-con{
			width: 100%;
			min-height: 1000rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.25);
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			&-title{
				width: 100%;
				display: flex;
				justify-content:space-between;
				align-items: center;
				line-height: 40rpx;
				padding: 20rpx 40rpx;
				border-bottom: 1px solid #E6E9ED;
				.left{
					flex: 1;
					text-align: center;
					font-size: 32rpx;
					padding-left: 30rpx;
				}
				.right{
					font-weight: bold;
					font-size: 28rpx;
					color: #1D1E25;
				}
			}
			&-box{
				width: 100%;
				padding: 50rpx 32rpx 40rpx 32rpx;
				text-align: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #242B42;
				padding: 0 48rpx 80rpx 48rpx;
				.list{
					display: flex;
					justify-content:space-between;
					align-items: center;
					padding: 40rpx 0;
					line-height: 36rpx;
					text-align: left;
					border-bottom: 2rpx solid #F0F5F9;
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
</style>
